<template>
    <div class="content">
        <div class="avatar">
            <input type="file" class="input-file" style="width:80px;height:80px;" name="avatar"
                   ref="file" @change="changeImage($event)"
                   accept="image/*">
            <img :src="avatar ? avatar : 'https://ganks.oss-cn-shenzhen.aliyuncs.com/img/head_icon.png'" alt=""
                 style="width:80px;height:80px;" name="avatar">
        </div>
        <!-- vueCropper 剪裁图片实现-->
        <div class="cut" v-if="isShowCropper">
            <vue-cropper ref="cropper"
                         :img="option.img"
                         :output-size="option.size"
                         :output-type="option.outputType"
                         :info="true"
                         :full="option.full"
                         :can-move="option.canMove"
                         :can-move-box="option.canMoveBox"
                         :fixed-box="option.fixedBox"
                         :original="option.original"
                         :auto-crop="option.autoCrop"
                         :auto-crop-width="option.autoCropWidth"
                         :auto-crop-height="option.autoCropHeight"
                         :center-box="option.centerBox"
                         :high="option.high">
            </vue-cropper>
            <ul class="btn-bottom">
                <li>
                    <van-button type="default" size="small" @click="isShowCropper = false">取消</van-button>
                </li>
                <li>
                    <van-button type="default" size="small" @click="finish">裁剪</van-button>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import {VueCropper} from 'vue-cropper'
    import {Button} from 'vant';

    export default {
        components: {VueCropper, [Button.name]: Button},
        data() {
            return {
                avatar: '',//头像
                //裁剪组件的基础配置option
                option: {
                    img: '',
                    size: 1,//是否按照截图框比例输出 默认为1
                    full: false,//是否输出原图比例的截图
                    outputType: 'png',//输出图片格式
                    canMove: false,//能否拖动图片
                    fixedBox: false,//截图框固定大小
                    original: false,//上传图片是否显示原始宽高 (针对大图 可以铺满)
                    canMoveBox: true,//能否拖动截图框
                    autoCrop: true,// 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 160,//自动生成截图框的宽
                    autoCropHeight: 90,//自动生成截图框的高
                    centerBox: true,//截图框是否限制在图片里(只有在自动生成截图框时才能生效)
                    high: true//是否根据dpr生成适合屏幕的高清图片
                },
                isShowCropper: false //是否显示截图框
            }
        },
        methods: {
            changeImage(e) {
                //上传图片
                // this.option.img
                let file = e.target.files[0];
                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                    alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                    return false
                }
                let reader = new FileReader();
                reader.onload = (e) => {
                    let data;
                    if (typeof e.target.result === 'object') {
                        // 把Array Buffer转化为blob 如果是base64不需要
                        data = window.URL.createObjectURL(new Blob([e.target.result]));
                    } else {
                        data = e.target.result;
                    }
                    this.option.img = data;
                    this.isShowCropper = true;
                };
                // 转化为base64
                // reader.readAsDataURL(file)
                // 转化为blob
                reader.readAsArrayBuffer(file)
            },
            finish() {
                this.$refs.cropper.getCropData((data) => {
                    this.isShowCropper = false;
                    this.avatar = data;
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .avatar {
        cursor: pointer;
        position: relative;
        text-align: center;
        margin-top: 28px;
        .input-file {
            position: absolute;
            top: 0;
            left: 50%;
            opacity: 0;
            cursor: pointer;
            transform: translate(-50%, 0);
        }
        & > img {
            border-radius: 50%;
        }
    }

    .cut {
        width: 100%;
        height: 240px;
        margin: 20px auto 0;
    }

    .btn-bottom {
        display: flex;
        margin-top: 20px;
        & > li {
            flex: 1;
            text-align: center;
        }
    }
</style>
